<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-03-05 16:24:08
-->
<template>
    <div class="singer-list-item" v-if="userlist !== null" @click="gotoUser">
        <div class="item-img">
            <img v-lazy="userlist.avatarUrl" alt="">
        </div>

        <div class="item-name">
            <span>{{ userlist.nickname }}</span>
            <span class="iconfont" :class="gender == 1 ? 'icon-nan' : 'icon-nv'"></span>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
    userlist: {
        type: Object,
        default: {}
    }
})
const gender = props.userlist.gender

function gotoUser() {
    router.push({
        name: 'UserDetail',
        params: { uid: props.userlist.userId }
    })
}
</script>

<style lang="scss" scoped>
.singer-list-item {
    .item-img {
        height: 165px;
        width: 200px;

        img {
            height: 100%;
            width: 100%;
        }
    }

    .item-name {
        margin-top: 10px;

        span {
            color: #373737;
            cursor: pointer;
            
        }

        .iconfont {
            display: inline-block;
            margin-left: 5px;
            font-size: 14px;
        }

        .icon-nan {
            color: #1296db;
        }

        .icon-nv {
            color: #d81e06;
        }
    }
}
</style>